import React, { useEffect , useState} from 'react'
import { Button, Form, Row, Input, Select, DatePicker , Table , Space, Dropdown, message ,Tag } from 'antd';
import type { ColumnsType, TableProps } from 'antd/es/table';
import { useSelector, useDispatch } from "umi"


const RangePicker: any = DatePicker.RangePicker;

type Props = {}


interface DataType {
    key: React.Key;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }
  


const Cashier = (props: Props) => {
    const [searchData,setSearchData]=useState({})
    const [timeData,settimeData]=useState([])
    const [form] = Form.useForm();
    const cashState = useSelector((state: { order: [],casDate:[] }) => {
        //state整个仓库i数据，product是仓库命名空间
        return state.order
      })
    const dispatch=useDispatch()

    useEffect(()=>{
        dispatch({
            type: "order/queryCas",
          })
    },[])

    // useEffect(()=>{
    //     // setSearchData({...searchData,dataLimit:[...timeData]})
    //     dispatch({
    //         type: "order/queryCas",
    //         payload:{
    //             dataLimit:searchData
    //         }
    //       })
    // },[searchData])


    
    const columns: ColumnsType<DataType> = [
        {
          title: '订单号',
          dataIndex: '_id',
          key: '_id',
        },
        {
          title: '用户信息',
          dataIndex: 'user',
          key: 'user',
        },
        {
          title: '实际支付',
          dataIndex: 'pay_actual',
          key: 'pay_actual',
        },
        {
          title: '优惠价格',
          key: 'pay_integral',
          dataIndex: 'pay_integral',
        },
        {
            title: '支付时间',
            key: 'pay_time',
            dataIndex: 'pay_time',
          },
      ];
    


    const changeDate = (value: any, dateString: any) => {
        console.log("dateString", dateString);
        settimeData(dateString)
        dispatch({
            type: "order/queryCas",
            payload:{
                dataLimit:[...dateString]
            }
          })
    }

    const onFinish=(values:any)=>{
        console.log(values);
        
        values.dataLimit=[...timeData]
        setSearchData({...values})
        console.log("setSearchData",searchData);
        dispatch({
            type: "order/queryCas",
            payload:values
          })

    }

    return (
        <>
            <Form
                form={form}
                name="advanced_search"
                className="ant-advanced-search-form"
                onFinish={onFinish}

            >
                <Row gutter={24} style={{ margin: '0px 0px', width: '60vw', display: 'flex', justifyContent: 'space-between' }}>

                    <Form.Item name="dataLimit" label="时间" >
                        <RangePicker onChange={changeDate} />
                    </Form.Item>
                    <Form.Item name="_id" label="订单编号" >
                        <Input style={{ width: '200px' }} placeholder="请输入订单编号" />
                    </Form.Item>
                    <Form.Item name="user" label="用户名" >
                        <Input style={{ width: '200px' }} placeholder="请输入用户名" />
                    </Form.Item>

                    <Form.Item >
                        <Button type="primary" htmlType="submit">
                            搜索
                        </Button>
                    </Form.Item>
                </Row>
            </Form>
            <Button type="primary"  style={{marginBottom:'30px'}}>
                查看收款二维码
            </Button>

            <Table className='table'
                pagination={{ defaultPageSize: 4 }}
                columns={columns}
                rowKey="_id"
                dataSource={cashState.casDate}
            />
        </>
    )
}

export default Cashier